<template>
    <div>
        <div>
            <Header></Header>
        </div>
        <div class="left">
            <div class="register-top">
                <el-tag>注册中心</el-tag>
                <el-form label-width="100px" class="demo-ruleForm">
                    <el-form-item label="用户名" prop="name">
                        <el-input v-model="ruleForm.name"></el-input>
                    </el-form-item>
                    <el-form-item label="真实姓名" prop="name">
                        <el-input v-model="ruleForm.realName"></el-input>
                    </el-form-item>
                    <el-form-item label="密码" prop="pass">
                        <el-input type="password" v-model="ruleForm.pass" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="确认密码" prop="checkPass">
                        <el-input type="password" v-model="ruleForm.checkPass" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm('ruleForm')">注册</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <div class="right">
            <img src="../assets/register.png" width="832" height="522">
        </div>
        <div>
            <hr/>
            <Footer></Footer>
        </div>
    </div>
</template>
<script>
    import Footer from "../components/Footer";
    import Header from "../components/Header"
    import {registerApi} from "../api";

    export default {
        components: {Header, Footer},
        data() {

            return {
                ruleForm: {
                    name: '',
                    pass: '',
                    checkPass: '',
                    realName:''
                }
            }
        },

        methods: {
            submitForm(formName) {
                const _this = this
            registerApi({
                username: _this.ruleForm.name,
                passsword: _this.ruleForm.pass,
                realName: _this.ruleForm.realName,
            }).then(res => {
                this.$message({
                    type: 'success',
                    message: '注册成功',
                    duration:500
                });
                this.$router.push({
                    name:'Login'
                })
            })
            },

        }
    };
</script>
<style>
    .el-tag.el-tag--light {
        width: 10vw;
        font-size: 15px;
        margin-left: 8vw;
        margin-bottom: 2vw;
    }
</style>
<style scoped>
    .left{
        float: left;
        width: 40%;
        height: 500px;
        margin-left: 0;

    }
    .register-top{
        margin-top: 10vh;
        width: 25vw;
        height: 65vh;
        margin-left: 50px;
    }
    .right{
        float: right;
        width: 60%;
        height: 500px;
    }
</style>
